<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>拼团商城</title>
	<meta name="keywords" content="拼团商城" />
	<meta name="description" content="拼团商城" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="js/mui.min.js"></script>
	<link href="css/mui.min.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	<link rel="stylesheet" href="css/swiper.css" />
	<script type="text/javascript">
		!function (J) { function H() { var d = E.getBoundingClientRect().width; var e = (d / 7.5 > 100 * B ? 100 * B : (d / 7.5 < 42 ? 42 : d / 7.5)); E.style.fontSize = e + "px", J.rem = e } var G, F = J.document, E = F.documentElement, D = F.querySelector('meta[name="viewport"]'), B = 0, A = 0; if (D) { var y = D.getAttribute("content").match(/initial\-scale=([\d\.]+)/); y && (A = parseFloat(y[1]), B = parseInt(1 / A)) } if (!B && !A) { var u = (J.navigator.appVersion.match(/android/gi), J.navigator.appVersion.match(/iphone/gi)), t = J.devicePixelRatio; B = u ? t >= 3 && (!B || B >= 3) ? 3 : t >= 2 && (!B || B >= 2) ? 2 : 1 : 1, A = 1 / B } if (E.setAttribute("data-dpr", B), !D) { if (D = F.createElement("meta"), D.setAttribute("name", "viewport"), D.setAttribute("content", "initial-scale=" + A + ", maximum-scale=" + A + ", minimum-scale=" + A + ", user-scalable=no"), E.firstElementChild) { E.firstElementChild.appendChild(D) } else { var s = F.createElement("div"); s.appendChild(D), F.write(s.innerHTML) } } J.addEventListener("resize", function () { clearTimeout(G), G = setTimeout(H, 300) }, !1), J.addEventListener("pageshow", function (b) { b.persisted && (clearTimeout(G), G = setTimeout(H, 300)) }, !1), H() }(window);
		if (typeof (M) == 'undefined' || !M) {
			window.M = {};
		}
	</script>

</head>

<body>
	<div class="search">
		<div class="mui-input-row mui-search">
			<input type="search" class="mui-input-clear" placeholder="搜索">
		</div>
	</div>
	<!--搜索分类列表-->
	<div class="mui-content mui-row mui-fullscreen search-menu">
		<div class="mui-col-xs-3">
			<div id="segmentedControls"
				class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">

			</div>
		</div>
		<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
		</div>
	</div>
	{{include './foot.html'}}
	<script src="js/jquery-1.10.1.min.js"></script>
	<script src="js/swiper.min.js"></script>
	<script type="text/javascript" src="js/comment.js"></script>
	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		var controls = document.getElementById("segmentedControls");
		var contents = document.getElementById("segmentedControlContents");
		var menulist = new Array("服饰箱包", "食品饮料", "母婴玩具", "家居生活", "美妆护肤", "水果生鲜", "家纺家具", "数码电器");
		var html = [];
		var i = 1,
			j = 1,
			m = 9, //左侧选项卡数量+1
			n = 13; //每个选项卡列表数量+1
		for (; i < m; i++) {
			html.push('<a class="mui-control-item" data-index="' + (i - 1) + '" href="#content' + i + '"> ' + menulist[i - 1] + '' + '</a>');
		}
		controls.innerHTML = html.join('');
		html = [];
		for (i = 1; i < m; i++) {
			html.push('<div id="content' + i + '" class="mui-control-content"><ul class="mui-table-view">' + '<h2><span class="fl">' + menulist[i - 1] + '</span><a href="" class="fr">查看更多></a></h2>');
			for (j = 1; j < n; j++) {
				var small = new Array("春装上新", "女鞋", "套装", "上衣", "裙子", "女裤", "箱包", "内衣", "睡衣", "男装", "男鞋", "户外运动");
				var imgArr = ['images/test.jpg', 'images/test.jpg', 'images/test.jpg', 'images/test.jpg', 'images/test.jpg', 'images/test.jpg', 'images/test.jpg', 'images/test.jpg', 'images/test.jpg', 'images/test.jpg', 'images/test.jpg', 'images/test.jpg'];
				html.push('<a href="">' + '<li class="mui-table-view-cell">' + '<img src="' + imgArr[j - 1] + '"/>' + '<p> ' + small[j - 1] + '</p> ' + '</li>' + '</a>');
			}
			html.push('</ul></div>');
		}
		contents.innerHTML = html.join('');
		//默认选中第一个
		controls.querySelector('.mui-control-item').classList.add('mui-active');
		//			contents.querySelector('.mui-control-content').classList.add('mui-active');
		(function () {
			var controlsElem = document.getElementById("segmentedControls");
			var contentsElem = document.getElementById("segmentedControlContents");
			var controlListElem = controlsElem.querySelectorAll('.mui-control-item');
			var contentListElem = contentsElem.querySelectorAll('.mui-control-content');
			var controlWrapperElem = controlsElem.parentNode;
			var controlWrapperHeight = controlWrapperElem.offsetHeight;
			var controlMaxScroll = controlWrapperElem.scrollHeight - controlWrapperHeight;//左侧类别最大可滚动高度
			var maxScroll = contentsElem.scrollHeight - contentsElem.offsetHeight;//右侧内容最大可滚动高度
			var controlHeight = controlListElem[0].offsetHeight;//左侧类别每一项的高度
			var controlTops = []; //存储control的scrollTop值
			var contentTops = [0]; //存储content的scrollTop值
			var length = contentListElem.length;
			for (var i = 0; i < length; i++) {
				controlTops.push(controlListElem[i].offsetTop + controlHeight);
			}
			for (var i = 1; i < length; i++) {
				var offsetTop = contentListElem[i].offsetTop;
				if (offsetTop + 100 >= maxScroll) {
					var height = Math.max(offsetTop + 100 - maxScroll, 100);
					var totalHeight = 0;
					var heights = [];
					for (var j = i; j < length; j++) {
						var offsetHeight = contentListElem[j].offsetHeight;
						totalHeight += offsetHeight;
						heights.push(totalHeight);
					}
					for (var m = 0, len = heights.length; m < len; m++) {
						contentTops.push(parseInt(maxScroll - (height - heights[m] / totalHeight * height)));
					}
					break;
				} else {
					contentTops.push(parseInt(offsetTop));
				}
			}
			contentsElem.addEventListener('scroll', function () {
				var scrollTop = contentsElem.scrollTop;
				for (var i = 0; i < length; i++) {
					var offsetTop = contentTops[i];
					var offset = Math.abs(offsetTop - scrollTop);
					//						console.log("i:"+i+",scrollTop:"+scrollTop+",offsetTop:"+offsetTop+",offset:"+offset);
					if (scrollTop < offsetTop) {
						if (scrollTop >= maxScroll) {
							onScroll(length - 1);
						} else {
							onScroll(i - 1);
						}
						break;
					} else if (offset < 20) {
						onScroll(i);
						break;
					} else if (scrollTop >= maxScroll) {
						onScroll(length - 1);
						break;
					}
				}
			});
			var lastIndex = 0;
			//监听content滚动
			var onScroll = function (index) {
				if (lastIndex !== index) {
					lastIndex = index;
					var lastActiveElem = controlsElem.querySelector('.mui-active');
					lastActiveElem && (lastActiveElem.classList.remove('mui-active'));
					var currentElem = controlsElem.querySelector('.mui-control-item:nth-child(' + (index + 1) + ')');
					currentElem.classList.add('mui-active');
					//简单处理左侧分类滚动，要么滚动到底，要么滚动到顶
					var controlScrollTop = controlWrapperElem.scrollTop;
					if (controlScrollTop + controlWrapperHeight < controlTops[index]) {
						controlWrapperElem.scrollTop = controlMaxScroll;
					} else if (controlScrollTop > controlTops[index] - controlHeight) {
						controlWrapperElem.scrollTop = 0;
					}
				}
			};
			//滚动到指定content
			var scrollTo = function (index) {
				contentsElem.scrollTop = contentTops[index];
			};
			mui(controlsElem).on('tap', '.mui-control-item', function (e) {
				scrollTo(this.getAttribute('data-index'));
				return false;
			});
		})();
		$('.mui-input-clear').keypress(function (e) {
			// console.log(e.keyCode);
			if (e.keyCode == 13) {
				location.href = '/theme1?keyvalue=' + $(this).val()
			}
		})
	</script>

</body>

</html>